<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ page
	import="universal.schema.action.*,java.util.*,universal.schema.model.*,com.opensymphony.xwork2.ActionContext"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

<link href="ViewResources/css/pager.css" rel="stylesheet">

<title></title>

<script type="text/javascript">
	$(function() {
		$("#tabs").tabs({
			selected : 3,
			disabled : [ 0, 1, 2, 4, 5 ]
		});
	});

	//TO GENERATE NEW FILTER ADDITION ROW
	function tryFunc(node) {
		var root = node.parentNode.parentNode;
		var allRows = root.getElementsByTagName('tr');
		var cRow = allRows[1].cloneNode(true);
		root.appendChild(cRow);
	}

	// to hide the loading img
	function preloader() {
		document.getElementById("loading").style.display = "none";
	}
	window.onload = preloader;
	
	function onLinkClick() {
		document.getElementById("Button1").style.display = "none";
		document.getElementById("Button2").style.display = "none";
		document.getElementById("Button3").style.display = "none";
		document.getElementById("loading").style.display = "block";
	}

</script>
</head>
<body>
	<div id="tabs">
		<ul>
			<li><a href="#tabs-1"><font style="font-size: 20px;">1</font>&nbsp;<font
					style="font-size: 12px">Select Tables</font></a></li>
			<!-- 0 -->
			<li><a href="#tabs-2"><font style="font-size: 20px;">2</font>&nbsp;<font
					style="font-size: 12px">Select Columns</font></a></li>
			<!-- 1 -->
			<li><a href="#tabs-2.5"><font style="font-size: 20px;">3</font>&nbsp;<font
					style="font-size: 12px">Choice</font></a></li>
			<!-- 2 -->
			<li><a href="#tabs-3"><font
					style="font-size: 20px; color: #FFAD00;">4</font>&nbsp;<font
					style="font-size: 12px">Select Filters</font></a></li>
			<!-- 3 -->
			<li><a href="#tabs-4"><font style="font-size: 20px;">5</font>&nbsp;<font
					style="font-size: 12px">View Query</font></a></li>
			<!-- 4 -->
			<li><a href="#tabs-5"><font style="font-size: 20px;">6</font>&nbsp;<font
					style="font-size: 12px">Query Results</font></a></li>
			<!-- 5 -->
		</ul>

		<!-- ================ Get Conditions content================ -->
		<div id="tabs-3">
			<br /> <br />

			<div class="row" align="center">
				<div class="span6 offset3" align="center">
					<table class="table table-bordered" theme="simple">
						<tr>
							<th colspan="2" align="center">
								&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
								&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

								Column Legend</th>
						</tr>
						<tr>
							<th>Column Name</th>
							<th>Data Type</th>

						</tr>
						<%
							ArrayList<Column> list = (ArrayList<Column>) ActionContext
									.getContext().getSession().get("Colsdatatypes");
							for (int i = 0; i < list.size(); i++) {
						%>

						<tr>

							<td><%=list.get(i).getColName()%></td>

							<td><%=list.get(i).getColType()%></td>

						</tr>
						<%
							}
						%>
					</table>
				</div>
			</div>
			<div>

				<br />
				<div align="center">
					<font size="4"><b>Add Filter Conditions</b></font> <br /> <br />
				</div>
				<br />

				<s:form method="post" action="createQuery">
				

					<table class="table table-striped table-bordered">
						<tr>
							<td align="center">Column Name</td>
							<td align="center">Operator</td>
							<td align="center">Value</td>
							<td align="center">Connector</td>
						</tr>
						<tr>
							<td>
								<!-- drop down list for 'chosen columns' -->
								<div class="input-prepend">
									<span class="add-on"> <i class="icon-list"
										style="color: black;"> </i>
									</span>
									<s:select name="columns" list="SelectedTableColumns"
										headerKey="-1" id="columns" headerValue="Choose Column"
										theme="simple" title="Columns List" />
								</div>

							</td>

							<td>
								<!-- drop down list for 'operator' -->
								<div class="input-prepend">
									<span class="add-on"> <i class="icon-filter"
										style="color: black;"> </i>
									</span>

									<s:select name="operators" list="operatorsList" headerKey="-1"
										id="operators" headerValue="Choose Operator" theme="simple"
										title="Operators List" />
								</div>

							</td>
							<td><s:textfield theme="simple" name="filtervalue" size="10"
									id="filtervalue" placeholder="Filter Value" /></td>
							<td><s:select name="connectors" list="#{'1':'AND','2':'OR'}"
									headerKey="-1" id="connectors" headerValue="Choose Connector"
									theme="simple" title="Connectors List" /></td>
						</tr>
						<tr>
							<td colspan="4">
								<!--  colspan="4" align="right" -->
								<button class="btn btn-success" type="button"
									onclick="tryFunc(this.parentNode);">Add More Filters</button>
							</td>
						</tr>
					</table>

					<!-- This is the loader window -->
					<div id="loading" style="display: none" align="center"></div>

					<table class="table table-condensed">
						<tr>
							<!-- Submit buttons -->
							<td><s:submit cssClass="btn btn-primary" value="Next"
									align="left" theme="simple" id="Button1"
									onclick="onLinkClick()" /></td>
							<td><s:reset cssClass="btn" value="Reset" name="reset"
									align="left" theme="simple" id="Button2" /></td>
							<td><s:submit cssClass="btn btn-danger" value="Quit"
									align="right" action="RestartWork" id="Button3" /></td>
							<td />
							<td />
						</tr>
						<s:if test="hasActionErrors()">
							<tr class="error">
								<td><s:actionerror /></td>
							</tr>
						</s:if>
					</table>
				</s:form>
			</div>
		</div>
	</div>

</body>
</html>